<template>
  <div>
    <div class="con">
      <div class="menu"  v-for="(item,index) in menuList" :key="index" @mouseleave="t2(index)">
          <div  class="menu-item-bj" >
            <div  @mouseenter="t1(index)" @click="goto(item.url)"  class="menu-item-btu">
              {{item.menuName}}
            </div>
          </div>
          <div @mouseenter="t1(index)" @mouseleave="t2(index)" class="menu-child">
            <my-nev-child style=" position: relative; z-index: 1;" ref="nevchild" :index="index" :childrenMenu="item.childrenMenu">
            </my-nev-child>
          </div>
      </div>
    </div>
  </div>
</template>

<script >
import MyNevChild from "@/views/home/my-nev-child.vue";

export default {
  name: "my-nev",
  components: {MyNevChild},
  props:{
    menuList:Array
  },
  data(){
    return{
      isHidden:false,
    }
  },
  methods:{
    goto(path){
      this.$router.push({ path:  path }).catch(()=>{});
    },
    t1(index){
      console.log("进入")
      this.$refs.nevchild.forEach(item=>{
        if(item.index==index){
          item.isV()
        }
      })
    },
    t2(index){
      console.log("离开")
      this.$refs.nevchild.forEach(item=>{
        if(item.index==index){
          item.isH()
        }
      })
    }
  }

}
</script>

<style scoped>
  .con{
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: flex-start
  }
  .menu{
    height: 100px;
  }
  .menu-item-bj{
    height:100px;
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center
  }
  .menu-item-btu{
    /* padding: 10px; */
    width: 90px;
    height: 35px;
    text-align: center;
    align-content: center;
    margin: 10px;
    background-color: #85AEDD;
    color: #ffffff;
    border-radius: 6px
  }
  .menu-item-btu:hover{
    cursor: pointer;
  }
  .menu-child{
    position: relative; top: -30px
  }

</style>
